<!-- 新增成员 -->
<template>
  <div class='add_user'>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
      <Row :gutter="16">
        <Col span="22">
        <FormItem label="成员角色：" prop="roleIds">
          <Select v-model="formValidate.roleIds" :multiple="addFlag=='Reception'"
            placeholder="请选择" class="cityConfigArea_moudle_select" @on-change='changeRole'>
            <Option v-for="item in roleIdsAttrSort" :key="item.roleId" :value="item.roleId">
              {{ item.roleName }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="22">
        <FormItem label="所属组别：" prop="groupId">
          <Select v-model="formValidate.groupId" placeholder="请选择"
            class="cityConfigArea_moudle_select">
            <Option v-for="item in groupList" :key="item.groupId" :value="item.groupId"
              @click.native="changeGroup(item)">
              {{ item.groupName }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" v-if="formValidate.groupId&&formValidate.groupId!=0">
        <Col span="22">
        <FormItem label="是否组长：" prop="whetherLeader">
          <Radio-group v-model="formValidate.whetherLeader">
            <Radio :label="1" :disabled='ishaveLeader'>是</Radio>
            <Radio :label="2">否</Radio>
          </Radio-group>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="22">
        <FormItem label="增加成员：" prop="userId">
          <div class="search_name">
            <Select v-model="formValidate.userId" filterable @on-query-change="searchUser"
              label-in-value @on-change="e=>{return roleNameChange(e)}" placeholder='请输入OA工号'
              clearable>
              <Option v-for="option in userList" :value="option.userId" :key="option.userId"
                :label="option.userName +'-'+ option.workNo ">
              </Option>
            </Select>
            <!-- <Input type="text" v-model="formValidate.certCode"></Input><Button type="text" @click="searchUser()">搜索</Button> -->
          </div>
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="22">
        <FormItem label="进场日期：" prop="entryDate">
          <DatePicker type="date" :options="Approach"
            @on-change='formValidate.entryDate = $event' format="yyyy-MM-dd"></DatePicker>
        </FormItem>
        </Col>
      </Row>
    </Form>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消</Button>
      <Button type="primary" @click="submitFun()" style="margin-left: 8px">确定</Button>
    </div>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  export default {
    props: {
      addFlag: ''
    },
    data() {
      return {
        Approach: {
          disabledDate(date) {
            return date && date.valueOf() > Date.now()
          },
        },
        userList: [],
        userId: '',
        roleIdsAttrSort: [],
        formValidate: {
          buildingId: '',
          entryDate: '',
          groupId: '0',
          operatorId: '',
          roleIds: '',
          teamId: '',
          userId: '',
          userName: '',
          whetherLeader: '2',
          workNo: '',
        },
        ruleValidate: {
          roleIds: [
          {
            required: true,
            type: this.addFlag == 'Reception' ? 'array' : 'number',
            message: '请选择成员角色',
            trigger: 'change',
          }, ],
          userId: [
            { required: true, message: '请选择增加成员', trigger: 'change', type: 'number' },
          ],
          entryDate: [
          {
            required: true,
            message: '请选择进场日期',
            trigger: 'change',
          }, ],
        },
        groupList: [
        {
          groupId: '0',
          groupName: '无',
          ishaveLeader: false
        }, ], //所属组别
        userMess: this.$dt.userInfo(),
        buildingId: this.$dt.buildInfo().housesId,
        teamId: this.$dt.session.get("teamsId"),
        ishaveLeader: false
      }
    },
    methods: {
      changeRole() {
        if (this.addFlag == 'bg') {
          let obj = {
            entryDate: '',
            groupId: '0',
            userId: '',
            userName: '',
            whetherLeader: '2',
            workNo: '',
          }
          this.formValidate = Object.assign(obj, this.formValidate)
          this.userList = []
        } else {
          return false
        }
      },
      roleNameChange(obj) {
        if (obj) {
          this.formValidate.userName = obj.label.split('-')[0]
          this.formValidate.workNo = obj.label.split('-')[1]
        }
      },
      //获取  所有前台角色:addFlag == 'Reception' rewardShareFlag:2;  所有参与分摊比例的后台角色: addFlag == 'bg' rewardShareFlag:4 
      getFrontRoleinit() {
        let params = {
          rewardShareFlag: this.addFlag == 'bg' ? 4 : 2
        }
        teamsApi.getFrontRoles({ ...params }).then((res) => {
          this.roleIdsAttrSort = res
        })
      },
      //获取全部分组
      getGroupinit() {
        let params = {
          teamId: this.teamId,
        }
        teamsApi.queryAllTeamGroup(params).then((res) => {
          this.groupList = this.groupList.concat(res)
        })
      },
      //切换分组
      changeGroup(obj) {
        this.ishaveLeader = obj.ishaveleader
      },
      //根据工号查人员
      searchUser(filterTxt) {
        if (!filterTxt) {
          this.formValidate.userName = ''
          this.formValidate.workNo = ''
          return false
        }
        if (filterTxt.length < 2 || filterTxt.length > 8) {
          return false
        }
        if (this.addFlag == 'bg' && !this.formValidate.roleIds) {
          this.$Message.warning('请先选择成员角色!')
          return false
        }
        let params = {
          workNo: filterTxt,
          bgRoleId: this.addFlag == 'bg' ? this.formValidate.roleIds : ''
        }
        teamsApi.getByWorkNo({ ...params }).then((res) => {
          this.userList = res
        })
      },
      handleClose() {
        this.$emit('onClose')
      },
      submitFun() {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            let params = {
              buildingId: this.buildingId,
              entryDate: this.formValidate.entryDate,
              groupId: this.formValidate.groupId == 0 ? '' : this.formValidate.groupId,
              operatorId: this.userMess.userId,
              roleIds: this.addFlag == 'Reception' ? this.formValidate.roleIds.join(
                ',') : this.formValidate.roleIds,
              teamId: this.teamId,
              userId: this.formValidate.userId,
              userName: this.formValidate.userName,
              whetherLeader: this.formValidate.whetherLeader == 1 ? true : false,
              workNo: this.formValidate.workNo,
            }
            teamsApi.addTeamUser(params).then((res) => {
              this.$Message.success('新增成员成功!')
              this.$emit('onClose')
              this.$emit('onChangeTable')
              this.unlocking('0102030200') && this.$emit('addUserRatio', res)
            })
          }
        })
      },
    },
    mounted() {
      this.getFrontRoleinit()
      this.getGroupinit()
    },
  }
</script>
<style lang='scss' scoped>
  .add_user {
    ::v-deep .ivu-date-picker {
      width: 100%;
    }

    .search_name {
      display: flex;
    }
  }
</style>